<template>
	<view class="detail-page">

		<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots autoplay circular>
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image :src="item.imgUrl" mode="aspectFill" class="swiper-img" style="zoom: 5;"></image>
			</swiper-item>
		</swiper>

		<!-- 商品标签（销量、卖点） -->
		<!-- <view class="tag-section">
			<view class="tag-item">一周内1000+人下单</view>
			<view class="tag-slogan">58项精细优化带来更舒适握感</view>
		</view> -->


		<!-- 优惠信息（免息、补贴） -->
		<!-- <view class="discount-section">
			<view class="discount-item">
				<text>可再享：3期免息</text>
				<text class="arrow">></text>
			</view>
			<view class="discount-item">
				<text class="discount-tag">领取国家补贴15%</text>
				<text class="arrow">立即领取 ></text>
			</view>
		</view> -->

		<!-- 商品标题&标签 -->
		<view class="title-section">
			<view class="tags">
				<text class="tag">百亿补贴</text>
				<text class="tag">小黑盒新品</text>
			</view>
			<text class="title">{{form.info.skuTitle}}</text>
			<view class="gift">{{form.info.skuName}}</view>
		</view>

		<!-- 销量/评价标签 -->
		<view class="info-section">
			<view class="info-item">24小时内85人已买</view>
			<view class="info-item">近7天4万+人逛过</view>
			<view class="info-item">多人评价"质量效果"</view>
		</view>

		<!-- 榜单 -->
		<view class="rank-section">
			<text>电竞鼠标热卖榜 · 第 10 名</text>
			<text class="arrow cuIcon-right"></text>
		</view>

		<!-- 实时下单提示 -->
		<!-- <view class="order-section">
			<text>限时补贴，先到先得</text>
			<view class="order-list">
				<view class="order-item">
					<image src="../../static/avatar1.png" mode="widthFix" class="avatar"></image>
					<text>词**</text>
					<text class="saved">已省0.31元</text>
				</view>
				<view class="order-item">
					<image src="../../static/avatar2.png" mode="widthFix" class="avatar"></image>
					<text>T**</text>
					<text class="saved">已省37.81元</text>
				</view>
			</view>
		</view> -->

		<!-- 发货信息 -->
		<view class="delivery-section">
			<text>本月平均3天内发货 | 承诺20天内发货</text>
			<text class="arrow cuIcon-right"></text>
		</view>


		<!-- 店铺信息 -->
		<view class="cart-list" @tap="toNav('/shopping/shoppSearch/index?shopId='+form.shop.userId)">
			<!-- 店铺信息（中） -->
			<view class="goods-content">
				<image class="goods-img" :src="form.shop.shopCover" mode="aspectFill"></image>
				<view class="goods-info-wrap">
					<!-- 店铺标题 -->
					<text class="goods-title">{{ form.shop.shopName }}</text>
					<!-- <view class="goods-spec">
						<cu-tag v-for="(tag, tagIdx) in item.skuAttr" style="margin-right: 10rpx;" :key="tagIdx">
							{{ tag }}
						</cu-tag>
					</view> -->

				</view>
			</view>
			<view>
				<text class="arrow" style="color: #a1a1a1;">进店逛一逛</text>
				<text class="arrow cuIcon-right"></text>
			</view>
		</view>



		<view style="width: 100%;">
			<image :src="img" mode="widthFix" alt="" style="width: 100%;"
				v-for="(img , index) in decriptList(form.desp.decript)" :key="index" />
		</view>





		<!-- 底部操作栏 -->
		<view class="bottom-bar box">
			<view class="cu-bar bg-white tabbar border shop" style="width: 100%;">
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-green">
						<!-- <view class="cu-tag badge"></view> -->
					</view>
					客服
				</button>
				<view class="action" @tap="toNav('/shopping/shoppMyCard/index')">
					<view class="cuIcon-cart">
						<view class="cu-tag badge">{{myCard.countType}}</view>
					</view>
					购物车
				</view>
				<view class="btn-group">
					<button class="cu-btn bg-orange round shadow-blur" @tap="isFilter = true">加入购物车</button>
					<button class="cu-btn bg-red round shadow-blur">立即订购</button>
				</view>
			</view>
		</view>


		<u-popup v-model="isFilter" mode="bottom" border-radius="14" style="position: relative;" height="1200rpx"
			:closeable="true">
			<view
				style="width: 100%;text-align: center;font-size:24rpx;font-weight: bold;padding-top:15rpx;padding-bottom:20rpx;color: #E10A07;">
				大促保价·假一赔四·极速退款
			</view>
			<view style="width: 100%;height: 200rpx;border-top: 2rpx solid #f5f5f5;padding: 20rpx;" class="flex">
				<view style="height: 160rpx;width: 160rpx;margin: 0 20rpx;border-radius: 6rpx;overflow: hidden;">
					<img :src="form.info.skuDefaultImg" alt="" style="width: 100%;height: 100%;" />
				</view>
				<view style="height: 100%;color: #E10A07;">
					<view style="height: 40rpx;font-weight: 600;" class="flex">
						<view style="font-size: 24rpx;height: 100%;" class="flex align-end">券后￥</view>
						<view style="font-size: 38rpx;height: 100%;" class="flex align-start">{{form.info.price}}</view>
						<!-- <view style="font-size: 24rpx;margin: 0 10rpx;height: 100%;font-weight: normal;"
							class="flex align-end">|</view>
						<view style="font-size: 24rpx;height: 100%;" class="flex align-end">优惠前￥2132</view> -->
					</view>
					<!-- <view style="height: 50rpx;" class="flex align-center">
						<text style="border: 2rpx solid #E10A07;font-size: 24rpx;padding: 0 10rpx;border-radius: 6rpx;">
							立减1100元
						</text>
					</view> -->
					<view class="flex align-center">
						<view>
							<ColorUICounter :max="999" v-model="addShoppingList.num" />
						</view>
						<view>{{form.hasStock?'有货':'缺货'}}</view>
					</view>
				</view>
			</view>
			<view class="VerticalBox">
				<scroll-view class="" scroll-y scroll-with-animation
					style="height:calc(1200rpx - 270rpx);padding: 40rpx;">
					<view class="cu-item " style="margin-bottom: 40rpx;" v-for="(item,index) in form.saleAttrs"
						:key="index">
						<view style="font-weight: 600;margin: 0 0 20rpx;">{{item.attrName}}</view>
						<view class="flex flex-wrap">
							<view v-for="(it , inx) in item.attrValues" class="text-center" :key="inx"
								@tap="TabSelect(item,it)"
								style="border-radius: 6rpx;margin: 0rpx 10rpx 10rpx;padding: 10rpx 20rpx;"
								:style="{'border': '2rpx solid' +  moSelect(it.skuIds),'color':moSelect(it.skuIds)}">
								{{it.attrValue}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>



			<view class="padding flex flex-direction" style="position: fixed;bottom: 40rpx; left: 0;width: 100%;">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="addShoppingCart"
					:disabled="!form.hasStock">加入购物车</button>
			</view>


		</u-popup>






	</view>
</template>
<script>
	import ColorUICounter from '@/shopping/components/Counter.vue'
	export default {
		components: {
			ColorUICounter
		},
		data() {
			return {
				// 轮播图图片列表（替换为实际地址）
				swiperList: [],
				skuId: "",
				userId: uni.getStorageSync('userId'),
				form: {
					desp: {
						decript: '',
					},
					info: {
						price: ''
					},
				},
				isFilter: false,
				addShoppingList: {
					skuId: '',
					num: 1,
				},
				myCard: {},
			};
		},

		onLoad(option) {
			this.skuId = option.skuId;
			this.getSpDetail()
			this.getShoppingCart()
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},

			//默认选项
			moSelect(it) {
				let arr = it.split(',')
				if (arr.includes(this.skuId)) {
					return '#E10A07'
				} else {
					return '#cbcbcb'
				}
			},
			toNav(url) {
				uni.navigateTo({
					url: url
				})
			},
			//商品详情图片展示
			decriptList(imgArr) {
				let data
				if (imgArr) {
					data = imgArr.split(',')
					return data
				}

			},


			getSpDetail() {

				this.$Request.get(`/app/product/item/${this.skuId}/info`).then(res => {
					if (res.code == 0 && res.item) {
						// this.addShoppingList.num = 1
						this.form = res.item
						this.swiperList = this.form.images
					}
				});
			},

			//选择类型
			TabSelect(item, it) {

				this.$queue.showLoading();
				this.form.saleAttrs.forEach(its => {
					if (its.attrId != item.attrId) {
						its.attrValues.forEach(im => {
							if (im.skuIds.split(',').includes(this.skuId)) {
								let a = im.skuIds.split(',')
								let b = it.skuIds.split(',')
								this.$nextTick(() => {
									const setB = new Set(b);
									const commonElements = a.filter(item => setB.has(item));
									this.skuId = commonElements[0]

									this.$Request.get(`/app/product/item/${this.skuId}/info`).then(
										res => {
											if (res.code == 0 && res.item) {
												this.form = res.item
											}
										});
									uni.hideLoading()
								})
							}
						})
					}
				})
			},


			addShoppingCart() {
				this.$queue.showLoading('添加中...')
				let data = {
					skuId: this.skuId,
					num: this.addShoppingList.num,
				}

				this.$Request.post('/app/mallCart/addToCart', data).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						this.$queue.showToast("添加成功");
						this.getShoppingCart()
						this.isFilter = false
					} else {
						uni.hideLoading()
						this.$queue.showToast(res.msg);
					}
				});
			},

			//购物车列表
			getShoppingCart() {
				this.$Request.get(`/app/mallCart/cartList`, {
					userId: this.userId
				}).then(res => {
					if (res.code == 0 && res.data) {
						this.myCard = res.data
					}
				});
			},

		}
	};
</script>
<style scoped lang="scss">
	.detail-page {
		background-color: #eeeeee;
		min-height: 100vh;
		padding-bottom: 100rpx; // 底部操作栏高度

		// 顶部导航栏
		.cu-bar.nav-bar {
			height: 88rpx;
			line-height: 88rpx;

			.action {
				width: 120rpx;
				text-align: center;
			}

			.content {
				flex: 1;
				text-align: center;
				font-size: 32rpx;
			}
		}

		// 轮播图
		.swiper {
			width: 100%;
			height: 600rpx;

			.swiper-img {
				width: 100%;
				height: 100%;
			}
		}

		// 商品标签（销量、卖点）
		.tag-section {
			padding: 20rpx;

			.tag-item {
				display: inline-block;
				background-color: #f5f5f5;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				margin-bottom: 10rpx;
			}

			.tag-slogan {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				margin-top: 10rpx;
			}
		}

		// 宝贝讲解进度
		.progress-section {
			padding: 20rpx;
			text-align: center;
			font-size: 28rpx;
			color: #666;
		}

		// 图集/套餐 横向滚动栏
		.tab-scroll {
			white-space: nowrap;
			padding: 20rpx 0;
			background-color: #f5f5f5;

			.tab-item {
				display: inline-block;
				width: 180rpx;
				margin: 0 10rpx;
				text-align: center;

				.tab-img {
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 24rpx;
				}
			}
		}

		// 促销信息（价格、已售）
		.promotion-section {
			padding: 20rpx;
			background-color: #ff4d4f; // 红色背景
			color: #fff;

			.promotion-tag {
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.price-section {
				display: flex;
				align-items: baseline;
				margin-bottom: 10rpx;

				.original-price {
					font-size: 24rpx;
				}

				.current-price {
					font-size: 40rpx;
					font-weight: bold;
					margin: 0 10rpx;
				}

				.start {
					font-size: 24rpx;
				}
			}

			.sold-section {
				font-size: 28rpx;
			}
		}

		// 优惠信息（免息、补贴）
		.discount-section {
			padding: 20rpx;

			.discount-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin-bottom: 10rpx;

				.discount-tag {
					color: #2db7f5;
				}

				.arrow {
					color: #999;
				}
			}
		}

		// 商品标题&标签
		.title-section {
			padding: 20rpx;
			background-color: #fff;

			.tags {
				margin-bottom: 10rpx;

				.tag {
					display: inline-block;
					background-color: #e5f2ff;
					color: #2db7f5;
					padding: 4rpx 10rpx;
					border-radius: 6rpx;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 44rpx;
				margin-bottom: 10rpx;
			}

			.gift {
				font-size: 24rpx;
				color: #999;
			}
		}

		// 销量/评价标签
		.info-section {
			background-color: #fff;
			padding: 0 20rpx 20rpx;

			.info-item {
				display: inline-block;
				background-color: #f5f5f5;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		// 榜单
		.rank-section {
			background-color: #fff;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #666;
		}

		// 实时下单提示
		.order-section {
			padding: 20rpx;

			.order-list {
				margin-top: 10rpx;
			}

			.order-item {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.saved {
					margin-left: auto;
					color: #ff4d4f;
				}
			}
		}

		// 发货信息
		.delivery-section {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
			background-color: #fff;
		}

		// 底部操作栏
		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			border-top: 1px solid #eee;
		}
	}

	.box {
		// margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	/* 商品列表 */
	.cart-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #fff;

		/* 商品内容 */
		.goods-content {
			display: flex;
			align-items: center;

			.goods-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
				// box-shadow: 0 0 10rpx 1rpx #e8e8e8;
			}

			.goods-info-wrap {
				flex: 1;

				.goods-title {
					width: 100%;
					font-size: 30rpx;
					color: #333;
					line-height: 44rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 文字超出2行省略 */
					overflow: hidden;
				}

				.goods-spec {
					font-size: 28rpx;
					color: #999;
					margin: 10rpx 0;
				}

				.tags {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 10rpx;

					.cu-tag {
						margin-right: 10rpx;
						margin-bottom: 10rpx;
						font-size: 24rpx;
					}
				}

				.price-section {
					display: flex;
					align-items: center;
					// justify-content: space-between;

					.current-price {
						color: #ff6700;
						font-size: 32rpx;
						font-weight: bold;
					}



					.discount {
						font-size: 28rpx;
						color: #ff6700;
						margin-left: 30rpx;
					}

					.detail {
						font-size: 28rpx;
						color: #666;
					}
				}

				.coupon-desc {
					font-size: 28rpx;
					color: #ff6700;
				}
			}
		}
	}
</style>